<template>
  <div ref="div">11</div>
</template>

<script>
export default {
  name: "testB",
};
</script>

<script setup>
import Interval from 'font-interval';

import { ref } from 'vue';
let div = ref()

let i1 = new Interval((val) => {
  div.value.style.left = val * 2 + 'px' // 元素移动
  if(val >= 300) {
    i1.clear()
  }
}, 0)

/* 
  使用方式( 和setTimeout基本一致 )：
          let i1 = new Interval( 回调函数(形参为连续持续的数字 0 ~ 无穷), 时间间隔(默认0, 类型为数字或字符串数字) )
          i1.clear() // 这个用来清除定时器
*/
</script>

<style scoped lang="scss">
div {
  --w: 100px;
  width: var(--w);
  height: var(--w);
  text-align: center;
  line-height: var(--w);
  color: #fff;
  background-color: orangered;
  position: absolute;
  left: 0;
}
</style>
